<template>
  <view class="wrapper">
    <t-header @back="goBack">{{ title }}</t-header>
    <view class="seacher-header">
      <uni-search-bar
        @confirm="search"
        placeholder="请输入股票代码/名称"
        v-model="keyword"
        @blur="search"
        @cancel="clear"
      >
      </uni-search-bar>
      <!-- <view class="soudsu"><span @click="serarch"></span>
				<view class="uni-input-wrapper">
					<input maxlength="140" v-model="keyword" enterkeyhint="search‌" autocomplete="off"
						placeholder="请输入股票代码/名称" type="text" class="uni-input-input" @input="serarch">
				</view>
			</view> -->
    </view>
    <view class="tit">股票列表</view>
    <view class="top flex">
      <view class="col-3 text-left">名称</view>
      <view class="col-3 text-center">代码</view>
      <view class="col-3 text-right">简拼</view>
    </view>

    <mescroll-body
      ref="mescrollRef"
      bottom="0"
      @init="mescrollInit"
      @down="downCallback"
      :up="upOption"
      @up="upCallback"
    >
      <template v-if="list && list.length > 0">
        <tui-list-cell
          margin="26rpx 0"
          v-for="(item, index) in list"
          :key="index"
        >
          <view class="flex align-center detail" @click="toDetail(item)">
            <view class="col-3 align-center text-left name">
              <image
                class="markicon"
                :src="
                  '/static/images/icons/' + getMarkType(item.allcode) + '.png'
                "
                mode=""
              ></image>
              {{ item.name }}
            </view>
            <view class="col-3 text-center code">{{ item.code }}</view>
            <view class="col-3 text-right letter">{{ item.letter }}</view>
          </view>
        </tui-list-cell>
      </template>

      <template v-else>
        <view class="empty-content">
          <img src="/static/images/wushuju.png" alt="" />
          <text>空空如也</text>
        </view>
      </template>
    </mescroll-body>
  </view>
</template>

<script setup>
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import ZhToPinYin from '@/components/common/tui-zh-pinyin/tui-zh-pinyin.js';
  import { getMarketCode } from '@/utils/stock.js';
  import { searchStock } from '@/api/index.js';
  import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
  import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
  import tHeader from '@/components/views/t-header/index.vue';

  const list = ref([]);
  const keyword = ref('');
  const timerId = ref(null);
  const zhToPinYin = ref(null);
  const title = ref('搜索');

  const { mescrollInit, downCallback, getMescroll } = useMescroll(
    onPageScroll,
    onReachBottom
  );
  // mescroll-body 配置（down && up）
  const downOption = {
    auto: false,
  };
  const upOption = {
    auto: false,
    empty: {
      use: false,
    },
  };

  const goBack = () => {
    uni.navigateBack();
  };

  const getMarkType = (value) => {
    return getMarketCode(value);
  };

  const toDetail = (item) => {
    uni.navigateTo({
      url: '/pages/shares/detail?code=' + item.allcode,
    });
  };

  const search = (value) => {
    if (timerId.value) {
      clearTimeout(timerId.value);
    }

    timerId.value = setTimeout(() => {
      downCallback({ num: 1, size: 10 });
    }, 800);
  };
  const clear = (value) => {
    keyword.value = value.value;
    console.log('cancel', value);
    if (timerId.value) {
      clearTimeout(timerId.value);
    }

    timerId.value = setTimeout(() => {
      downCallback({ num: 1, size: 10 });
    }, 800);
  };

  const upCallback = async (page) => {
    console.log('ssss', keyword.value);
    if (keyword.value === '') {
      page.endSuccess(0);
      return;
    }

    try {
      const res = await searchStock({
        page: page.num,
        size: page.size,
        key: keyword.value,
      });

      if (page.num === 1) list.value = [];

      if (res.data) {
        res.data.list.forEach((v) => {
          v.letter = zhToPinYin.value.getInitials(v.title);
        });

        list.value = list.value.concat(res.data.list);
        page.endSuccess(res.data.list.length);
      } else {
        page.endSuccess(0);
      }
    } catch (error) {
      page.endErr();
    }
  };

  onMounted(() => {
    zhToPinYin.value = new ZhToPinYin(true);
  });

  onBeforeUnmount(() => {
    if (timerId.value) {
      clearTimeout(timerId.value);
    }
  });

  // 绑定下拉刷新和上拉加载事件
  // onPullDownRefresh(() => {
  //   downCallback();
  // });

  onReachBottom(() => {
    getMescroll().triggerUpScroll();
  });
</script>

<style lang="scss" scoped>
  .wrapper {
    background: #f5f5f5;
  }
  .nav-box {
    width: 100%;
    height: 152rpx;
    background: linear-gradient(178deg, #e92232 0%, #f6843d 100%);
    padding: 72rpx 42rpx 30rpx 42rpx;
    text-align: center;
    position: relative;
    .tui-icon {
      position: absolute;
      left: 32rpx;
      bottom: 25rpx;
    }
    &-title {
      font-size: 36rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .seacher-header {
    margin: 24rpx 18rpx 22rpx 18rpx;
    .uni-searchbar {
      background-color: #fff;
      border-radius: 34rpx;
      box-shadow: 0rpx 12rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
      padding: 0 24rpx;
      height: 102rpx;
      ::v-deep .uni-searchbar__box {
        height: 100%;
        justify-content: center;
        align-items: center;
        background-color: #fff !important;
        .uni-searchbar__box-search-input {
          height: 32px;
          font-size: 30rpx;
          color: #8f8f8f;
        }
        .uni-searchbar__box-icon-search {
          padding-right: 0 !important;
          .uniui-search {
            font-size: 40rpx !important;
            color: #8f8f8f;
            margin-top: 6rpx;
          }
        }
        .uni-searchbar__text-placeholder {
          font-size: 30rpx;
          color: #8f8f8f;
        }
      }
      ::v-deep .uni-searchbar__cancel {
        line-height: 100rpx;
        font-size: 30rpx;
      }
    }
    .headk {
      height: 12rem;
      // background: url(@/static/images/search-bg.png);
      background-size: 100% 100%;

      h2 {
        text-align: center;
        height: 3rem;
        width: 100%;
        position: relative;
        line-height: 3rem;
        font-size: 1.3rem;
        color: #fff;
        background: transparent;
        font-weight: 500;
        z-index: 3;

        .hbnh {
          position: absolute;
          left: 1.2rem;
          font-size: 1.2rem;

          .fan {
            width: 0.7rem;
            height: 1.4rem;
            background: url()
              no-repeat 50%;
            background-size: 100%;
            display: inline-block;
            margin-right: 0.4rem;
            vertical-align: middle;
            margin-top: -0.15rem;
          }
        }
      }

      .soudsu {
        width: 24rem;
        height: 2.4rem;
        background: hsla(0, 0%, 100%, 0.2);
        border-radius: 1.5rem;
        margin: 2.4rem auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        span {
          width: 1.2rem;
          height: 1.2rem;
          background: url()
            no-repeat 50%;
          background-size: 100%;
          margin-left: 0.6rem;
          margin-top: 0.6rem;
        }

        uni-input {
          height: 2.4rem;
          line-height: 2.4rem;
          background: transparent;
          color: #fff;
          font-size: 1rem;
          margin-left: 0.5rem;
        }

        .uni-input-placeholder {
          color: #f1f1f1;
        }
      }
    }
  }

  .tit {
    text-align: center;
    font-weight: 400;
    font-size: 40rpx;
    margin-bottom: 24rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .col-3 {
    padding: 0 20rpx;
    box-sizing: border-box;
  }
  .markicon {
    width: 34rpx;
    height: 36rpx;
    margin-right: 12rpx;
  }

  .top {
    position: sticky;
    top: 0;
    border-radius: 34rpx 34rpx 0 0;
    background: linear-gradient(to bottom, #ffffff, #f7e9e9);
    padding: 32rpx 38rpx 24rpx 34rpx;
    margin: 0 18rpx;
    font-size: 36rpx;
    font-weight: 400;
    z-index: 10;
    color: #2f384a;
  }
  .detail {
    .name {
      color: #1e1e1e;
      font-size: 28rpx;
      font-weight: 500;
    }
    .code {
      color: #000;
      font-size: 26rpx;
      font-weight: bold;
    }
    .letter {
      color: #000;
      font-size: 26rpx;
      font-weight: 600;
    }
  }
  .mescroll-body {
    margin: 0 18rpx 22rpx 18rpx;
  }
  .empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);

    > img {
      margin-bottom: 26rpx;
    }

    > text {
      color: #b6b6b6;
      font-size: 28rpx;
      font-weight: 400;
      font-family: PingFangSC, PingFang SC;
    }
  }

  ::v-deep .tui-list-cell::after {
    border-bottom: 2rpx solid #e2e2e2;
  }
  ::v-deep .mescroll-body-content.mescroll-wxs-content {
    background-color: #fff;
  }
  // @media (prefers-color-scheme: dark) {
  // 	.top{background:#111111 !important;}
  // }
</style>
